<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="keyword" content="">
    <meta name="description" content="">
    <title>首页 - 电子网(公司名称)</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/page.css">
</head>
<body>
    <!--container 容器 -->
    <div class="container">
        <div class="header">
            <img src="images/logo.png" alt="电子网(公司名称)" class="fl">
            <div class="header-right fr">
                <!-- menu 菜单 -->
                <p class="menu fr">
                    <a href="">注册</a>
                    &nbsp; &nbsp; &nbsp;
                    <a href="">登录</a>
                </p>
                <div class="clear"></div>
                <!-- 导航 -->
                <ul class="mainbav fr">
                    <li>
                        <a href="" title="关于我们">关于我们</a>
                        <ul class="subnav">  
                            <li><a href="" title="CEO 致词">CEO 致词</a></li>
                            <li><a href="" title="公司历史">公司历史</a></li>
                            <li><a href="" title="企业文化">企业文化</a></li>
                            <li><a href="" title="组织结构">组织结构</a></li>
                            <li><a href="" title="合作伙伴">合作伙伴</a></li>
                        </ul>
                    </li>
                    <li><a href="" title="产品展示">产品展示</a></li>
                    <li><a href="" title="新闻中心">新闻中心</a></li>
                    <li><a href="" title="人才招聘">人才招聘</a></li>
                    <li><a href="" title="客户留言">客户留言</a></li>
                </ul>   
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>

        <div class="banner">
            <!-- 广告图 -->
            <img src="images/head.png" alt="">
        </div>  

        <div class="index-main">
            <div class="left fl">
                <ul class="tab fl">
                    <li class="active" i="0">通知</li>
                    <li i="1">公司新闻</li>
                </ul>
                <div class="more fl"></div>
                <div class="clear"></div>

                <ul class="list">
                    <li><a href="">1web上半年人才录用向导</a><span>[2014-01-01]</span></li>
                    <li><a href="">1web上半年人才录用向导</a><span>[2014-01-01]</span></li>
                    <li><a href="">1web上半年人才录用向导</a><span>[2014-01-01]</span></li>
                    <li><a href="">1web上半年人才录用向导</a><span>[2014-01-01]</span></li>
                </ul>
                <ul class="list" style="display: none;">
                    <li><a href="">2web上半年人才录用向导</a><span>[2014-01-01]</span></li>
                    <li><a href="">2web上半年人才录用向导</a><span>[2014-01-01]</span></li>
                    <li><a href="">2web上半年人才录用向导</a><span>[2014-01-01]</span></li>
                    <li><a href="">2web上半年人才录用向导</a><span>[2014-01-01]</span></li>
                </ul>

                <div class="menu">
                    <ul>
                        <li>
                            <img src="images/3.png" alt="">
                            <a href="">人才招聘</a>      
                            <p>Job</p>
                        </li>
                        <li>
                            <img src="images/4.png" alt="">
                            <a href="">人才招聘</a>
                            <p>Job</p>
                        </li>
                        <li>
                            <img src="images/5.png" alt="">
                            <a href="">人才招聘</a>
                            <p>Job</p>
                        </li>
                    </ul>
                    <div class="clear"></div>
                </div>
            </div>

            <div class="center fl">
                <div class="pro">
                    <img src="images/6.png" alt="" class="fl pic">
                    <div class="content fr">
                        <p><span>New</span> Product</p>
                        <p>ASA SG 1209</p>
                        <p>最好的产品,坚持ASA web开发的产品的特别系列</p>
                        <a href=""><img src="images/more.jpg" alt="" class="more"></a>
                    </div>
                    <div class="clear"></div>
                    <img src="images/15.png" alt="" class="prev">
                    <img src="images/15.png" alt="" class="next">
                </div>

                <ul>
                    <li>
                        <img src="images/7.png" alt="" class="pic">
                        <a href="">e -目录</a>
                        <p>持续的企业延伸的《web</p>
                        <a href=""><img src="images/more.jpg" alt=""></a>
                    </li>
                    <li>
                        <img src="images/8.png" alt="" class="pic">
                        <a href="">投资指南</a>
                        <p>持续的企业延伸的《web</p>
                        <a href=""><img src="images/more.jpg" alt=""></a>
                    </li>
                </ul>
            </div>

            <div class="right fl">
                <h3>
                    01 公司历史
                    <img src="images/11.png" alt="">
                </h3>
                <!-- 内容 -->
                <div class="info">
                    <div class="content fl">
                        <p>BUSINESS INFO</p>
                        <p>持续的企业延伸的维伯,《介绍我</p>
                        <a href=""><img src="images/more.jpg" alt=""></a>
                    </div>
                    <img src="images/9.png" alt="" class="fr pic">
                    <div class="clear"></div>
                </div>
                <h3>
                    02 企业文化
                    <img src="images/12.png" alt="">
                </h3>
                <!-- 内容 -->
                <div class="info">
                    <div class="content fl">
                        <p>BUSINESS INFO</p>
                        <p>持续的企业延伸的维伯,《介绍我</p>
                        <a href=""><img src="images/more.jpg" alt=""></a>
                    </div>
                    <img src="images/9.png" alt="" class="fr pic">
                    <div class="clear"></div>
                </div>
                <h3>
                    03 服务指南
                    <img src="images/12.png" alt="">
                </h3>
                <!-- 内容 -->
                <div class="info">
                    <div class="content fl">
                        <p>BUSINESS INFO</p>
                        <p>持续的企业延伸的维伯,《介绍我</p>
                        <a href=""><img src="images/more.jpg" alt=""></a>
                    </div>
                    <img src="images/9.png" alt="" class="fr pic">
                    <div class="clear"></div>
                </div>
            </div>
            <div class="clear"></div>
        </div>

        <div class="footer">
            <!-- 网页底部 -->
            <ul>  
                <li><a href="" title="法律高地">法律高地</a></li>
                <li><a href="" title="隐私政策">隐私政策</a></li>
                <li><a href="" title="电子邮件">电子邮件</a></li>
                <li><a href="" title="网站地图">网站地图</a></li>
            </ul>
            <div class="clear"></div>
            <p>COPYRIGHT ⓒ WENGDO company. All rights reserved. </p>
            <div class="select">
                <select name="" id="friendlink"> <!--下拉框的改变事件 onchange-->
                    <option value="">友情链接</option>
                    <option value="http://qq.com">腾讯网</option>
                    <option value="http://taobao.com">淘宝网</option>
                </select>
            </div>
        </div>
    </div>
    <script>
        // DOM
        var friendlink = document.getElementById('friendlink'); // 获取友情链接下拉框（对象）
        // 效果1：添加"onchange"下拉框改变事件的结构
        friendlink.onchange = function(){
            // 跳转
            // alert(this.value);
            // this 就是下拉框（对象）
            // this.value  就是所选择的选项的属性value值
            if(this.value.length!=0){   // 为什么要加这个判断
                // location.href = this.value;     // 这个跳转，就是做到选择了第2、3选项才能跳转
                open(this.value);
            }
        }

        // 效果2：实现“选项卡”，添加“onmouseover”鼠标经过事件
        var lis = document.querySelector('.tab').getElementsByTagName('li');  //两个选项li（数组）
        var list = document.querySelectorAll('.list');  // 两个列表（数组）
        // console.log(lis)
        for(var i=0;i<lis.length;i++){
            // i 就是要作为数组的下标
            // lis[i] 就是那两个li标签（对象）
            lis[i].onmouseover = function(){

                // 先去掉两个li标签的class名
                for(var j=0;j<lis.length;j++){
                    // j 就是要作为数组的下标（注意：这个j和i没有关系的）
                    // lis[j] 也是两个li标签（对象）
                    lis[j].className = '';
                    // 先让两个列表都隐藏
                    list[j].style.display = 'none';
                }

                // this 就是经过的那个li标签
                this.className = 'active';
                // 显示对应的列表
                // this.getAttribute('i') 获取选项li标签的自定义属性i
                list[this.getAttribute('i')].style.display = 'block';
            }
        }
        
        // 效果3：首页右侧，经过标题，显示下标的内容
        var h3 = document.querySelector(".right").getElementsByTagName("h3"); // 3个h3标签（数组对象）
        var info = document.querySelectorAll(".info");      // 获取class名叫做info的标签（div）有3个，数组对象

        for(var a=0;a<h3.length;a++){
            // h3[a] 就是那3个h3标签（3个标题）对象
            h3[a].setAttribute('abc',a);  // 自定义属性（属性可以随便写的）
            h3[a].onmouseover = function(){
                // for循环
                for(var b=0;b<h3.length;b++){
                    info[b].style.display = "none"; // 做什么？那3个div全部隐藏
                }
                info[this.getAttribute('abc')].style.display = 'block';
            }
        }

    </script>
</body>
</html>